<template>
  <div class="container mx-auto px-4 py-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-6">{{ isEdit ? '编辑植物' : '添加植物' }}</h2>
    <form @submit.prevent="handleSubmit" class="space-y-6">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="space-y-2">
          <label class="block text-sm font-medium text-gray-700">植物名称</label>
          <input
            v-model="form.name"
            type="text"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none"
            required
          />
        </div>
        <div class="space-y-2">
          <label class="block text-sm font-medium text-gray-700">学名</label>
          <input
            v-model="form.scientificName"
            type="text"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none"
          />
        </div>
      </div>
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700">描述</label>
        <textarea
          v-model="form.description"
          rows="4"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none"
        ></textarea>
      </div>
      <div class="flex justify-end space-x-4">
        <button
          type="button"
          class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-custom"
          @click="$router.back()"
        >
          取消
        </button>
        <button
          type="submit"
          class="px-4 py-2 text-white bg-primary rounded-lg hover:bg-primary/90 transition-custom"
          :disabled="loading"
        >
          {{ loading ? '保存中...' : '保存' }}
        </button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'EditPlantView',
  data() {
    return {
      form: {
        name: '',
        scientificName: '',
        description: ''
      },
      loading: false
    }
  },
  computed: {
    isEdit() {
      return !!this.$route.params.id
    }
  },
  methods: {
    async handleSubmit() {
      try {
        this.loading = true
        // 实现保存逻辑
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.$router.push('/plants')
      } catch (error) {
        console.error('保存失败:', error)
      } finally {
        this.loading = false
      }
    }
  },
  async created() {
    if (this.isEdit) {
      // 如果是编辑模式，加载植物数据
      try {
        // 实现加载逻辑
        this.form = {
          name: '示例植物',
          scientificName: 'Example Plant',
          description: '这是一个示例植物的描述。'
        }
      } catch (error) {
        console.error('加载数据失败:', error)
      }
    }
  }
}
</script> 